<template>
    <el-container class="container">
        <el-aside width="200px" class="left-aside">
            <div class="left-widget">
                <div class="clock" @mouseover="rotateClock(true)" @mouseleave="rotateClock(false)">
                    <span class="time">{{ time }}</span>
                </div>
                <div class="flow-lines"></div> <!-- 左边装饰流线 -->
            </div>
        </el-aside>
        <el-container class="middle-container">
            <el-header>
                <el-dropdown>
                    <!-- 修改个人信息 -->
                    <el-avatar size="large" @click="dialog = true"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <router-link :to="{ path: '/login' }">
                                <el-dropdown-item @click="removeToken">退出登录</el-dropdown-item>
                            </router-link>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-drawer v-model="dialog" title="用户信息" :before-close="handleClose" direction="ttb"
                    class="demo-drawer">
                    <div class="demo-drawer__content">
                        <div>
                            <el-row>
                                <el-col :span="21">
                                    <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
                                        <el-row>
                                            <el-form-item label="用户名" prop="username" class="custom-select">
                                                <el-input v-model="form.username" placeholder="请输入用户名" />
                                            </el-form-item>
                                            <el-form-item label="名字" prop="name" class="custom-select">
                                                <el-input v-model="form.name" placeholder="请输入名字" />
                                            </el-form-item>
                                            <el-form-item label="年龄" prop="age" class="custom-select">
                                                <el-input v-model="form.age" placeholder="请输入年龄" />
                                            </el-form-item>
                                            <el-form-item label="性别" prop="sex" class="custom-select">
                                                <el-select v-model="form.sex" placeholder="请选择性别">
                                                    <el-option v-for="item in sexOptions" :key="item.value"
                                                        :label="item.label" :value="item.value" />
                                                </el-select>
                                            </el-form-item>
                                        </el-row>
                                        <el-row>
                                            <el-form-item label="电话" prop="phone" class="custom-select">
                                                <el-input v-model="form.phone" placeholder="请输入电话" />
                                            </el-form-item>
                                            <el-form-item label="角色身份" prop="roleId" class="custom-select">
                                                <!-- <el-input v-model="form.roleId" placeholder="请输入角色 0超级管理员，1管理员，2普通账号" /> -->
                                                <el-select v-model="form.roleId" placeholder="请选择角色身份" v-if="form.roleId != 2">
                                                    <el-option v-for="item in roleOptions" :key="item.value"
                                                        :label="item.label" :value="item.value" />
                                                </el-select>
                                                <el-tag size="large" v-else>{{roleOptions[2].label}}</el-tag>
                                            </el-form-item>
                                            <el-form-item label="密码" prop="password" v-if="form.id != null"
                                                class="custom-select">
                                                <el-input type="password" v-model="form.password" placeholder="请输入新密码"
                                                    show-password />
                                            </el-form-item>
                                            <el-form-item label="是否有效" prop="isvalid" class="custom-select">
                                                <!-- <el-input v-model="form.isvalid" placeholder="请输入是否有效，Y有效，其他无效" /> -->
                                                <el-select v-model="form.isvalid" placeholder="请选择是否有效">
                                                    <el-option v-for="item in isvalidOptions" :key="item.value"
                                                        :label="item.label" :value="item.value" />
                                                </el-select>
                                            </el-form-item>
                                        </el-row>
                                    </el-form>
                                </el-col>
                                <el-col :span="3">
                                    <el-avatar size="large" style="width: 50%; height: 100%;"><h1>{{form.username}}</h1></el-avatar>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="demo-drawer__footer contents">
                            <el-button @click="cancelForm">关闭</el-button>
                            <el-button type="primary" :loading="loading" @click="submitForm">
                                提交
                            </el-button>
                        </div>
                    </div>
                </el-drawer>
            </el-header>
            <el-main class="apps-container">
                <router-view></router-view>
            </el-main>
            <el-footer>
                <el-row justify="center">
                    <el-col v-for="(item, index) in buttons" :key="index" :span="5" class="content">
                        <router-link :to="item.path" v-if="item.path !== '/users' || form.roleId !== 2">
                            <el-button class="circle-button" size="large" type="primary" :icon="item.icon" circle
                                @mouseover="hoveredButton = index" @mouseleave="hoveredButton = -1" />
                        </router-link>
                        <el-button v-else class="circle-button" size="large" type="primary" :icon="item.icon" circle
                            disabled />
                        <span v-if="hoveredButton === index" class="button-text">{{ item.text }}</span>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
        <el-aside width="200px" class="right-aside">
            <div class="right-widget">
                <div class="clock" @mouseover="rotateClock(true)" @mouseleave="rotateClock(false)">
                    <span class="time">{{ time }}</span>
                </div>
                <div class="flow-lines"></div> <!-- 右边装饰流线 -->
            </div>
        </el-aside>
    </el-container>
</template>

<script setup>
import { Edit, Goods, User, MostlyCloudy} from '@element-plus/icons-vue';
import { useRouter } from "vue-router"
import { removeToken } from "../../store/token";

// 组件逻辑
import { reactive, ref, toRefs, getCurrentInstance, onMounted } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
import { getInfo, updateUser } from '../../api/user'
// 获取当前实例的代理对象
const { proxy } = getCurrentInstance();
const formLabelWidth = '80px'
let timer

const dialog = ref(false)
const loading = ref(false)

const buttons = [
    { path: '/goods', icon: Goods, text: '商品' },
    { path: '/goodStype', icon: Edit, text: '商品分类' },
    { path: '/storage', icon: MostlyCloudy, text: '仓库' },
    { path: '/users', icon: User, text: '用户信息' },
];

const hoveredButton = ref(-1);

// 定义是否上架的数组，便于根据 "Y", "N"来显示有效和无效
const isvalidOptions = [
    { label: "有效", value: "Y" },
    { label: "无效", value: "N" }
];
// 定义性别的数组，便于根据 1, 0, null 来显示男,女和未知
const sexOptions = [
    { label: "男", value: 1 },
    { label: "女", value: 0 },
    { label: "未知", value: null }
];

//定义角色的数组，便于根据 "0","1", "2"来显示超级管理员，管理员和普通账号
const roleOptions = [
    { label: "超级管理员", value: 0 },
    { label: "管理员", value: 1 },
    { label: "普通账号", value: 2 }
];

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 6,
        username: null,
        sex: null,
        roleId: null,
        isvalid: null
    },
    rules: {
        username: [
            { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        sex: [
            { required: true, message: "性别不能为空", trigger: "change" }
        ],
        roleId: [
            { required: true, message: "角色 0超级管理员，1管理员，2普通账号不能为空", trigger: "blur" }
        ],
        isvalid: [
            { required: true, message: "是否有效，Y有效，其他无效不能为空", trigger: "blur" }
        ]
    }
});

const { queryParams, form, rules } = toRefs(data);

// 获取用户信息
getUserInfo();
function handleClose(done) {
    if (loading.value) {
        return
    }
    ElMessageBox.confirm('是否要保存?')
        .then(() => {
            loading.value = true
            timer = setTimeout(() => {
                done()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false
                }, 400)
            }, 2000)
        })
        .catch(() => {
            // catch error
        })
}
function cancelForm() {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
}

/**拿到用户信息 */
function getUserInfo() {
    getInfo().then(res => {
        form.value = res.data
    })
}
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
    proxy.$refs["userRef"].validate((valid) => {
        if (!valid) return
        updateUser(form.value).then(res => {
            cancelForm();
            getUserInfo();
        })
    })
}


const time = ref('');
const isRotating = ref(false);

// 实时更新时间
onMounted(() => {
    updateClock();
    setInterval(updateClock, 1000); // 每秒更新一次
});

function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    time.value = `${hours}:${minutes}:${seconds}`;
}

// 控制时钟旋转
function rotateClock(state) {
    isRotating.value = state;
}

</script>

<style scoped>
.container {
    height: 100vh;
    /* 设置容器高度为视口高度 */
    display: flex;
    flex-direction: row;
}

/* 左右两边的 aside 部分 */
.left-aside,
.right-aside {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #004dff, #00aaff);
    /* 渐变蓝色背景 */
    position: relative;
    overflow: hidden;
}

.left-widget,
.right-widget {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 时钟样式 */
.clock {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(51, 153, 255, 0.7);
}

.clock:hover {
    transform: rotate(360deg);
    box-shadow: 0 0 30px rgba(51, 153, 255, 0.9);
}

/* 时间显示 */
.time {
    font-family: 'Courier New', Courier, monospace;
}

/* 装饰流线效果 */
.flow-lines {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: flowAnimation 5s infinite linear;
}

/* 动画效果 */
@keyframes flowAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.middle-container {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
}

.el-header {
    height: 100px;
    /* 设置 header 和 footer 的高度 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-footer {
    height: 80px;
    box-shadow: var(--el-box-shadow-dark)
}

.contents {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.apps-container {
    background-color: #f5f5f5;
    /* 背景颜色 */
}

.custom-select {
    width: 20%;
    /* 或者指定一个具体的宽度 */
    overflow: auto;
    /* 如果内容超出容器，显示滚动条 */
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: row;
}

.el-footer {
    height: 80px;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    /* 为了使文字相对于按钮定位 */
}

.circle-button {
    transition: transform 0.3s, box-shadow 0.3s;
}

.circle-button:hover {
    transform: scale(2) translate(50%, -50%);
    /* 鼠标悬停时变大并向中间靠拢 */
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
    /* 蓝色拖尾 */
}

/* 文字样式 */
.button-text {
    position: absolute;
    top: 60px;
    /* 调整文字位置 */
    /* left: 50%; */
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.content:hover .button-text {
    opacity: 1;
    /* 鼠标悬停时显示文字 */
    transform: translate(-50%, -20px);
    /* 文字向上运动 */
}
</style>